<template>
  <div class="searchList">
    <section>
      <img src="../../../assets/img/search-list/gg1.png" alt="广告位1" class="advertisement1">

      <ul class="tab-box">
        <li :class="{active:isActive}" @click="tabClick">品牌</li>
        <li :class="{active:!isActive}" @click="tabClick">咨询</li>
        <li />
        <li v-show="isActive">全部品牌</li>
      </ul>

      <div v-show="isActive" class="pinpai">
        <ul v-if="hasMsg" class="listBox">
          <li v-for="(item,index) in listData" :key="index" class="pp-item">
            <div class="li-con">
              <div class="img-box">
                <img :src="item.logo">
              </div>
              <div class="conText">
                <h4>
                  <span>{{ item.brand }} &nbsp; <img src="../../../assets/img/strength/已认证.png"> </span>
                  <p>公司：{{ item.title }}</p>
                </h4>
                <p>{{ item.description }}</p>
              </div>
            </div>
            <div class="li-right">
              <div>
                <img src="../../../assets/img/user/user.png">
                <span>我要加盟</span>
              </div>
              <button>查看品牌详情</button>
            </div>
          </li>
        </ul>
        <div v-if="hasMsg" class="ceSelfPages">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="100"
            background
            layout="prev, pager, next, jumper"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 空表页 -->
        <div v-if="!hasMsg" class="notHave">
          <p>抱歉，未找到您搜索的品牌</p>
          <p>您可以尝试：同义关键词、缩短关键词、减少筛选条件</p>
        </div>
      </div>

      <div v-show="!isActive" class="zixun">
        <div v-for="i in number" :key="i" class="information">
          <div class="informationTxt clearfix">
            <div class="clearfix zixun-title-box">
              <div class="newDate">
                <h6>12</h6>
                <h6>05月</h6>
              </div>
              <div class="zixun-title">
                <p>品牌快讯</p>
                <h2>食物“美色”不是罪 懂点科学更放心</h2>
              </div>
            </div>
            <div class="inforImg">
              <img src="../../../assets/img/news/03.png">
            </div>
            <p>
              盘点一周资讯，知悉行业动态。上周，我们关注以下热点：2019母情节慈善捐赠活动圆满举行，
              尚赫倾情捐赠；中国环境电器行业产品技术技术交流会暨品牌巡展共商净水事宜；
              四季沐歌斩获2019IAI国际广告大奖；2019Q1中国地表水水质状况公布。
            </p>
            <div class="informationSpan">
              <span><i class="iconfont iconsearch_icon_dianzan" />39</span>
              <span><i class="iconfont iconsearch_icon_paizhuan" />10</span>
              <span><i class="iconfont iconsearch_icon_liulanlaing" />10932</span>
            </div>
          </div>
        </div>
        <div v-show="without" class="without">没有更多资讯了</div>
        <div v-show="Smore" class="more">
          <el-button type="primary" plain @click="more">查看更多</el-button>
        </div>
        <!-- 空表页 -->
        <div v-if="!hasMsg" class="notHave">
          <p>抱歉，未找到您搜索的品牌</p>
          <p>您可以尝试：同义关键词、缩短关键词、减少筛选条件</p>
        </div>
      </div>
      <recommends :recommends="tjMsg" />
      <img src="../../../assets/img/search-list/gg2.png" alt="广告位2" class="advertisement2">
    </section>

  </div>
</template>

<script>
import recommends from '../../../components/template-item1/recommends'
export default {
  beforeRouteEnter(to, from, next) {
    /* console.log(to, 1)
    console.log(from, 2)
    console.log(next, 3) */
    next()
  },
  components: { recommends },
  data() {
    return {
      isActive: true,
      Smore: true,
      without: false,
      number: 10,
      activeName: 'first',
      currentPage: 5,
      hasMsg: false, // 是否是空页
      listData: [
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '回力',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '海尔',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '热风',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '回力',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '回力',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '回力',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '回力',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。'
        },
        {
          logo: require('../../../assets/img/search-list/logo1.png'),
          brand: '回力',
          title: '上海回力鞋业有限公司',
          description: '回力鞋业创建于1927年，距今已有92年的历史。“回力”商标注册于1935年，1997年被认定为上海市著名商标；1999年被认定为中国驰名商标。'
        }
      ],
      tjMsg: {
        tit: '为你推荐',
        moreMsg: '查看更多',
        data: [
          {
            img: require('../../../assets/img/search-list/defaultLogo.png'),
            name: '迪士尼',
            describe: '专业制造100年',
            iDo: '我要加盟'
          },
          {
            img: require('../../../assets/img/search-list/defaultLogo.png'),
            name: '哈士奇',
            describe: '专业制造100年',
            iDo: '我要加盟'
          },
          {
            img: require('../../../assets/img/search-list/defaultLogo.png'),
            name: '万达地产',
            describe: '专业制造100年',
            iDo: '我要加盟'
          }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.hasMsg) {
      this.hasMsg = true
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // tab切换
    handleClick(tab, event) {
      console.log(tab, event)
    },
    more() {
      if (this.number + 1 > 10) {
        this.without = true
        this.Smore = false
      }
    },
    tabClick() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style lang="scss" scoped>
.searchList {
  width: 100%;
  background-color: #f6f6f6;
  > section {
    width: 1200px;
    margin: 0 auto;
    .advertisement1 {
      margin-bottom: 20px;
    }
    >.tab-box{
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      font-size: 20px;
      color: #333;
      text-align: center;
      position: relative;
      >li{
        width: 200px;
        height: 68px;
        line-height: 68px;
        border-bottom: 1px solid #EEEEEE;
        background-color: #fff;
        border-right: 1px solid #EEEEEE;
        position: relative;
      }
      >.active{
        border-bottom: none;
        &::after{
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1001;
          display:block;
          content:"";
          width: 200px;
          border-top: 2px solid #417AEF;
        }
      }
      >li:first-child{
        cursor: pointer;
      }
      >li:nth-child(2){
        cursor: pointer;
      }
      >li:nth-child(3){
        width: 800px;
      }
      >li:nth-child(4){
        position: absolute;
        top: 9px;
        right: 40px;
        z-index:101;
        font-size: 14px;
        color: #fff;
        background-color: #417aef;
        border-radius: 4px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
      }
    }

    >.pinpai{
      >.listBox{
        padding-bottom: 40px;
        background-color: #fff;
        .pp-item {
          padding: 20px 40px;
          height: 241px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          color: #666;
          background-color: #fff;
          border-bottom: 1px solid #cccccc;
          cursor: pointer;
          > .li-con {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            width: 929px;
            >.img-box{
              width: 280px;
              height: 158px;
              box-shadow:0px 2px 3px rgba(117,123,145,.2);
              border-radius: 4px;
              display: flex;
              justify-content: center;
              align-items: center;
              >img{
                display: block;
                max-width: 226px;
                max-height: 127px;
              }
            }
            >.conText {
              width: 613px;
              > h4 {
                margin-bottom: 19px;
                > span {
                  font-size: 24px;
                  color: #333;
                  margin-right: 12px;
                }
                p {
                  font-size: 16px;
                  line-height: 24px;
                  color: rgba(51, 51, 51, 1);
                  margin-top: 20px;
                }
              }
              > p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3; //规定几行显示省略号
                -webkit-box-orient: vertical;
                line-height: 1.6;
              }
            }
          }
          >.li-right{
            width: 135px;
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-items: center;
            >div{
              display: flex;
              flex-flow: row nowrap;
              justify-content: center;
              align-items: center;
              width: 130px;
              margin-bottom: 76px;
              >img{
                display: block;
                height: 19px;
              }
              >span{
                font-size: 14px;
                color: #666;
                margin-left: 7px;
              }
            }
            > button {
              width: 130px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background-color: #ffffff;
              color: #666;
              border: 1px solid #999;
              border-radius: 4px;
              font-size: 14px;
              cursor: pointer;
            }
          }

        }
      }
      .ceSelfPages {
        height: 120px;
        line-height: 120px;
        padding-top: 45px;
        background-color: #f6f6f6;
        >.el-pagination {
          text-align: center;
          >.el-pager{
            >li{
              font-size: 14px;
            }
          }
          >.el-pagination__jump {
            padding-top: 3px;
          }
        }
      }
    }

    >.zixun{
      background-color: #fff;
      >.information {
        width: 100%;
        padding: 20px 60px;
        .informationTxt {
          border-bottom: 1px solid #cccccc;
          padding-bottom: 20px;
          >.zixun-title-box{
            height: 55px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            >.newDate {
              width: 50px;
              height: 50px;
              background: rgba(246, 246, 246, 1);
              border-radius: 50%;
              text-align: center;
              font-size: 14px;
              color: #666;
              >h6 {
                height: 19px;
                font-size: 14px;
                color: rgba(102, 102, 102, 1);
                margin-top: 5px;
              }
            }
            >.zixun-title{
              padding-left: 14px;
              >h2 {
                width: 536px;
                font-size: 24px;
                font-weight: bold;
                color: #333;
              }
              >p{
                margin-bottom: 9px;
                font-size: 14px;
                color: #333;
              }
            }
          }
          >p {
            width: 774px;
            height: 82px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(102, 102, 102, 1);
            margin: 20px 20px 45px;
            float: left;
          }
          span {
            width: 56px;
            height: 19px;
            font-size: 14px;
            line-height: 26px;
            margin-left: 20px;
            color: rgba(102, 102, 102, 1);
            i {
              color: rgba(170, 170, 170, 1);
              margin-right: 5px;
            }
          }
        }
        .inforImg {
          float: left;
          width: 200px;
          height: 150px;
          margin-top: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      >.without {
        width: 100%;
        height: 120px;
        text-align: center;
        font-size: 24px;
        color: #999999;
        line-height: 120px;
      }
      >.more {
        width: 100%;
        height: 120px;
        text-align: center;
        background-color: #f6f6f6;
        .el-button {
          width: 278px !important;
          height: 54px !important;
          border: 1px solid rgba(65, 122, 239, 1) !important;
          border-radius: 4px !important;
          margin: 40px 0px;
        }
        .el-button--primary.is-plain {
          width: 97px;
          height: 32px;
          font-size: 24px;
          line-height: 32px;
          color: rgba(65, 122, 239, 1);
          letter-spacing: 20px;
          background-color: rgba(246, 246, 246, 1);
        }
      }
    }

    .notHave {
      height: 171px;
      background-color: #fff;
      padding-top: 60px;
      margin-bottom: 30px;
      > p {
        text-align: center;
      }
      > p:first-child {
        color: #333;
        font-size: 16px;
        margin-bottom: 11px;
      }
      > p:last-child {
        font-size: 14px;
        color: #707070;
      }
    }
    > .advertisement2 {
      margin-bottom: 35px;
    }

  }
}
/* .el-pagination.is-background .el-pager li{
		font-size: 14px;
	} */
</style>

